<?
require_once("conn.php");
?>
<style>
/*body {
    font-family: Arial, "Free Sans";
    margin: 0;
    padding: 0;
}*/
#item_container {
    width: 200px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
	height:400px;
	overflow:auto;
}
.item {
    background: #fff;
    float: left;
    padding: 5px;
    margin: 5px;
    cursor: move;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    z-index: 5;
}
.title, .price {
    display: block;
    text-align: center;
    font-size: 14px;
    letter-spacing: -1px;
    font-weight: bold;
    cursor: move;
}
.title {
    color: #333;
}
.price {
    color: #0099cc;
    margin-top: 5px;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}
.icart, .icart label {
    cursor: e-resize;
}
.divrm {
    text-align: right;
}
.remove {
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    position: relative;
    top: -7px;
}
.remove:hover {
    color: #999;
}
.clear {
    clear: both;
}
#cart_container {
    margin: 0 auto;
    width: 695px;
}
#cart_title span {
    border: 8px solid #666;
    border-bottom-width: 0;
    background: #333;
    display: block;
    float: left;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 10px;
    -webkit-border-radius: .5em .5em 0 0;
    -moz-border-radius: .5em .5em 0 0;
    border-radius: .5em .5em 0 0;
}
#cart_toolbar {
    overflow: hidden;
    border: 8px solid #666;
    height: 190px;
    z-index: -2;
    width: 683px;
    -webkit-border-radius: 0 .5em 0 0;
    -moz-border-radius: 0 .5em 0 0;
    border-radius: 0 .5em 0 0;
    background: #ffffff;
}
#cart_items {
    height: 190px;
    width: 683px;
    position: relative;
    padding: 0 0 0 2px;
    z-index: 0;
    cursor: e-resize;
    border-width: 0 2px;
}
.back {
    background: #e9e9e9;
}
#navigate {
    width: 663px;
    margin: 0 auto;
    border: 8px solid #666;
    border-top-width: 0;
    -webkit-border-radius: 0 0 .5em .5em;
    -moz-border-radius: 0 0 .5em .5em;
    border-radius: 0 0 .5em .5em;
    padding: 10px;
    font-size: 14px;
    background: #333;
    font-weight: bold;
}
#nav_left {
    float: left;
}
#nav_left a {
    padding: 4px 8px;
    background: #fff;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    text-decoration: none;
    color:#0099cc;
}
#nav_left a:hover {
    background: #666;
    color: #fff;
}
#nav_right {
    float: right;
}
.sptext {
    background: #ffffff;
    padding: 4px 8px;
    margin-left: 8px;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    color: #666;
}
.count {
    color: #0099cc;
}
.drop-active {
    background: #ffff99;
}
.drop-hover {
    background: #ffff66;
}

</style>

<script>
var total_items = 0;
var total_price = 0;
$(document).ready(function() {

    $(".item").draggable({
        revert: true
    });
    $("#cart_items").draggable({
        axis: "x"
    });

    $("#cart_items").droppable({
        accept: ".item",
        activeClass: "drop-active",
        hoverClass: "drop-hover",
        drop: function(event, ui) {
            var item = ui.draggable.html();
            var itemid = ui.draggable.attr("id");
            var html = '<div class="item icart">';
            html = html + '<div class="divrm">';
            html = html + '<a onclick="remove(this)" class="remove '+itemid+'">&times;</a>';
            html = html + '<div/>'+item+'</div>';
            $("#cart_items").append(html);

            // update total items
            total_items++;
            $("#citem").html(total_items);

            // update total price
            var price = parseInt(ui.draggable.find(".price").html().replace("$ ", ""));
            total_price = total_price + price;
            $("#cprice").html("$ " + total_price);

            // expand cart items
            if (total_items > 4) {
                $("#cart_items").animate({width: "+=120"}, 'slow');
            }
        }
    });


	// navigate
	$("#btn_next").click(function() {
    $("#cart_items").animate({left: "-=100"}, 100);
		return false;
	});
	$("#btn_prev").click(function() {
		$("#cart_items").animate({left: "+=100"}, 100);
		return false;
	});
	$("#btn_clear").click(function() {
		$("#cart_items").fadeOut("2000", function() {
		   $(this).html("").fadeIn("fast").css({left: 0});
		});
		$("#citem").html("0");
		$("#cprice").html("$ 0");
		total_items = 0;
		total_price = 0;
		return false;
	});

});


function remove(el) {
    $(el).hide();
    $(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
    $(el).parent().parent().fadeOut('1000');
    setTimeout(function() {
        $(el).parent().parent().remove();
        // collapse cart items
        if (total_items > 3) {
            $("#cart_items").animate({width: "-=120"}, 'slow');
        }
    }, 1100);

    // update total item
    total_items--;
    $("#citem").html(total_items);

    // update totl price
    var price = parseInt($(el).parent().parent().find(".price").html().replace("$ ", ""));
    total_price = total_price - price;
    $("#cprice").html("$ " + total_price);
}



</script>
<!-- Drop Area -->
<div>
	<div style="position: relative; float: left; width: 710px; background-color: pink;">
		<div id="cart_container">
		  <div id="cart_title">
			  <span>Shopping Cart</span>
			  <div class="clear"></div>
		  </div>
		  <div id="cart_toolbar">
			  <div id="cart_items" class="back"></div>
		  </div>
		  <div id="navigate">
			  <div id="nav_left">
				  <a href="" id="btn_prev"><</a>
				  <a href="" id="btn_next">></a>
				  <a href="" id="btn_clear">Clear Cart</a>
			  </div>
			  <div id="nav_right">
				  <span class="sptext">
					  <label>Items </label><label class="count" id="citem">0</label>
				  </span>
				  <span class="sptext">
					  <label>Price </label><label class="count" id="cprice">$ 0</label>
				  </span>
			  </div>
			  <div class="clear"></div>
		  </div>
		</div>
	</div>
	<div style="position: relative; float: left; width: 190px; height: 125px; background-color: yellow;">
		<!-- Drag Item -->
		<div id="item_container">
		<?
			$sqlP = "SELECT * FROM pch_product;";
			$queryP = mysql_query($sqlP);
			$i=1;
			while($rowP = mysql_fetch_array($queryP)){
		?>
				<div class="item" id="i<?=$i?>">
					<label class="id"><?=$rowP["id"]?></label>
					<label class="title"><?=$rowP["product_name"]?></label>
					<label class="price">$ 20</label>
					<label class="Amount"><input type="text" id="amount<?=$i?>"></label>
				</div>
			 
		<?
				$i++;
			}
		?>
			  <div class="clear"></div>
		</div>
	</div>
</div>




